import React, { Suspense } from 'react'
import { Router, Switch, Route, Redirect } from 'react-router-dom'
import AuthRoute from '@/components/AuthRoute'
// 导入自己封装的history 把它放到Router中
import history from './utils/history'

// 配置 路由懒加载(React.lazy) 还需要导入 suspense 包裹Switch
const Login = React.lazy(() => import('@/pages/Login'))
const Home = React.lazy(() => import('@/pages/Layout'))
const Edit = React.lazy(() => import('@/pages/Profile/Edit'))
const Chat = React.lazy(() => import('@/pages/Profile/Chat'))
const NotFound = React.lazy(() => import('@/components/NotFound'))
export default function App() {
  return (
    <Router history={history}>
      <div className="app">
        {/* 配置组件加载不出来时的备用渲染组件 */}
        <Suspense fallback={<div></div>}>
          <Switch>
            {/* 重定向 */}
            <Redirect exact from="/" to="/home"></Redirect>
            <Route path="/login" component={Login}></Route>
            <Route path="/home" component={Home}></Route>
            {/* 一点击 直接显示  和login 和home 是同一级别的  属于一级路由 */}
            <AuthRoute path="/profile/edit" component={Edit}></AuthRoute>
            <AuthRoute path="/profile/chat" component={Chat}></AuthRoute>
            <Route component={NotFound}></Route>
          </Switch>
        </Suspense>
      </div>
    </Router>
  )
}
